<template>
    <div class="ping-fabu">
        <div class="fan">
            <div class="fabu-left">
                <button @click="back">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    <span>发布评语</span>
                </button>

            </div>
            <div class="fabu-rigth">
                <el-button @click="back">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </div>
        </div>
        <div class="fa">
            <el-form label-width="120px">

                <el-form-item label="评价范围:">
                    <el-select v-model="a" placeholder="选择班级" @change="change">
                        <el-option label="三年级一班" value="3-1" />
                        <el-option label="三年级二班" value="3-2" />
                    </el-select>
                    &nbsp; &nbsp; &nbsp;
                    <el-checkbox class="ath" label="全选" name="type" />

                    <!-- <el-checkbox-group> -->
                    <div class="group">
                        <el-checkbox v-for="(item, index) in evaluate" :key="index" :label="item.name"
                            @click="nmk(item.name)" />
                    </div>

                    <!-- </el-checkbox-group> -->
                </el-form-item>


                <el-form-item label="评价类型">
                    <el-radio-group v-model="radio">
                        <el-radio v-for="item, index in evaluateType" :key="index" :label="item.name"
                            size="large"></el-radio>
                        <!-- <el-radio label="2" size="large"> </el-radio>
                        <el-radio label="3" size="large"> </el-radio> -->
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="分值">
                    <el-input v-model="score" />
                </el-form-item>

                <el-form-item label="评价内容">
                    <el-input type="textarea" v-model="detail" />
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import server from '@/api/index';
import { reactive, toRefs, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
let evaluate: any = ref([])
let evaluateType: any = ref([])
var router = useRouter()

let detail: any = ref()
let score: any = ref()
let radio: any = ref()
let check = ref()
let tId: any = ref('1001')
let array: any = ref([])

let a: any = ref()
const nian: any = ref(
    {
        gradeId: {
            3: '三年级',
            2: '二年级',
            1: '一年级'
        },
        classId: {
            3: '三班',
            2: '二班',
            1: '一班'
        }

    })
var xi: any
onMounted(async () => {
    var rew = await server.zcg.student_getStudentByPage()
    evaluate.value = rew.data.data.date
    // console.log(rew.data.data.date);
    xi = rew.data.data.date
    var rew = await server.zcg.evaluateType_getEvaluateTypeAll()
    evaluateType.value = rew.data.data
    // console.log(rew.data.data);
})

var change = () => {
    const ex = JSON.parse(JSON.stringify(xi))
    // console.log(ex);
    // evaluate.value = ex.filter(item.)
    if (a.value) {
        var gradeId = a.value.split('-')[0]
        var classId = a.value.split('-')[1]
        // console.log(a.value, gradeId, classId);
        evaluate.value = ex.filter((item: any) => item.classes.gradeId == gradeId && item.classes.classId == classId)
    }
}

var onSubmit = async () => {
    var idarr: any = []
    array.value.forEach((items: any) => {
        var res = evaluate.value.find((item: any) => item.name == items).id
        // console.log(res);
        idarr.push(res)
    })
    // console.log(idarr);


    var radioid = evaluateType.value.find((item: any) => item.name == radio.value).id

    idarr.forEach(async (item: any) => {
        var rew = await server.zcg.evaluate_saveEvaluate({
            sId: item, tId: tId.value, typeId: radioid, score: score.value, detail: detail.value
        })
    })

    // router.push('/home/homeschool/em')
    router.push('/home/homeschool/em')

    // console.log(radioid);
    // console.log(detail.value);
    // console.log(score.value);
    // console.log(radio.value);
    // console.log(check.value);
}

var nmk = (name: any) => {
    // check.value = name;
    // console.log(name);
    array.value.push(name);
    for (let i = 0; i < array.value.length; i++) {
        for (let j = i + 1; j < array.value.length; j++) {
            if (array.value[i] == array.value[j]) {
                array.value.splice(j, 1)
                j--
            }

        }

    }
    // console.log(array.value);
}

var back = () => {
    router.push('/home/homeschool/em')
}


</script>

<style scoped lang="scss">
.ping-fabu {
    width: 100%;

    .fan {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid black;
        box-shadow: 0px 0px 5px;
        line-height: 80px;

        .fabu-left {
            height: 80px;
            float: left;
            margin-left: 40px;

            button {
                border: 0;
            }
        }

        .fabu-rigth {
            float: right;
            height: 80px;
            margin-right: 30px;
        }
    }

    .fa {
        width: 75%;
        margin-top: 80px;
        padding-left: 20px;

        .el-form-item {
            margin-bottom: 30px;

            .ath {
                margin-right: 500px;
            }

            .group {
                width: 300px;

                margin-top: 10px;
                background: #f9f9f9;
                padding-left: 15px;
                padding-top: 15px;
                padding-right: 20px;
            }
        }
    }
}
</style>